import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Card, Table, Row,  } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { router } from 'umi'
import GapBlock from '@/components/GapBlock'
import {
  getOrderDetails,
} from '@/services/distribution/order'

const hasSearchBtn = JSON.parse(localStorage.getItem('hasSearchBtn'))

const columns = [
  {
    title: '序号',
    dataIndex: 'sort',
    key: 'sort',
    render(text, record, index){
      return <div>{index + 1}</div>
    }
  },
  {
    title: "商品名称",
    dataIndex: "goodsName",
    key: "goodsName"
  },
  {
    title: "商品金额",
    dataIndex: "goodsPrice",
    key: "goodsPrice"
  },
  {
    title: "商品数量",
    dataIndex: "goodsNums",
    key: "goodsNums"
  },
  {
    title: "商品状态",
    dataIndex: "goodsStatusName",
    key: "goodsStatusName"
  },
  {
    title: "分销人",
    dataIndex: "distributionPersonName",
    key: "distributionPersonName"
  },
  {
    title: "分销人类型",
    dataIndex: "distributionPersonTypeName",
    key: "distributionPersonTypeName"
  },
  {
    title: "分销方案",
    dataIndex: "distributionName",
    key: "distributionName"
  },
  {
    title: "提成模式",
    dataIndex: "distributionCommissionTypeName",
    key: "distributionCommissionTypeName"
  },
  {
    title: "额度/比例",
    dataIndex: "distributionCommissionVal",
    key: "distributionCommissionVal"
  },
  {
    title: "佣金",
    dataIndex: "commission",
    key: "commission"
  },
  {
    title: "分销状态",
    dataIndex: "distributionStatusName",
    key: "distributionStatusName"
  },
  {
    title: "结算状态",
    dataIndex: "isClearingName",
    key: "isClearingName"
  },
  {
    title: "备注",
    dataIndex: "remark",
    key: "remark"
  },
];
const OrderDetails = props => {
  const { form, location: { query } } = props
  const { getFieldDecorator } = form
  const [data, setColData] = useState([])
  useEffect(() => {
    init({
      orderNo: query.orderNo
    })
  }, [])

  const init = async params => {
    const res = await getOrderDetails(params)
    setColData(res.data)    
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)

    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return(
      <Col span={8}>
        <Form.Item label={`名称`}>
          {getFieldDecorator(`id`, {})
            (<Input />)}
        </Form.Item>
      </Col>
    )
  }
  // 按钮处理
  const handleBtn = type => {
    
  }
  console.log('data', data.amdDistributionOrderDetailList);
  
  return (
    <PageHeaderWrapper title={'分销订单详情'}>
      {/* <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} /> */}
      <RenderButtom click={handleBtn} />
      <Button type="primary" onClick={() => router.goBack()}>返回</Button>
      <GapBlock />
      <Card title={<b>分销订单编号{}</b>}>
        <Row gutter={24}>
          <Col span={4}>订单类型：{data.orderTypeName}</Col>
          <Col span={4}>支付场景：{data.orderPaySceneName}</Col>
          <Col span={4}>支付状态：{data.payStatusName}</Col>
          <Col span={4}>分销订单：{data.isDistributionOrder == 1 ? '是' : '否'}</Col>
          <Col span={4}>自提订单：{data.isPickup == 1 ? '是' : '否'}</Col>
          <Col span={4}>实付金额：{data.actualPrice}</Col>
        </Row>
        <Row gutter={24}>
          <Col span={4}>优惠金额：{data.couponAmount}</Col>
          <Col span={4}>员工编号：{data.employeeNo}</Col>
          <Col span={4}>员工名称：{data.employeeName}</Col>
          <Col span={4}>系统类型：{data.osTypeName}</Col>
          <Col span={4}>商户名称：{data.supplierName}</Col>
          <Col span={4}>门店名称：{data.storeName}</Col>
        </Row>
        <Row gutter={24}>
          <Col span={4}>pos名称：{data.posName}</Col>
          <Col span={4}>用户名称：{data.userName}</Col>
          <Col span={4}>用户手机：{data.userPhone}</Col>
          <Col span={4}>下单时间：{data.orderTime}</Col>
          <Col span={4}>支付时间：{data.payTime}</Col>
          <Col span={4}>订单备注：{data.orderMemo}</Col>
        </Row>
      </Card>
      <GapBlock />
      {data && <Table 
        columns={columns}
        dataSource={data.amdDistributionOrderDetailList}
      />}
    </PageHeaderWrapper>
    )
}

export default Form.create()(OrderDetails)
